import { LogoutOutlined, LockOutlined, GlobalOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin, Modal } from 'antd';
import React from 'react';
import { ConnectProps, FormattedMessage } from 'umi';
import { history, connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { CurrentUser } from '@/models/user';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import UploadUtil from '@/components/UploadUtil';
import imgAvatar from '@/assets/avatar.png';
import PswUpdate from '@/pages/account/components/pswUpdate';

export type GlobalHeaderRightProps = {
  currentUser?: CurrentUser;
  menu?: boolean;
  visible?: boolean;
} & Partial<ConnectProps>;

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  state = {
    visible: false,
  };
  onMenuClick = (event: { key: React.Key; keyPath: React.Key[]; item: React.ReactInstance }) => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }

    if (key === 'resetPsw') {
      this.setVisible(true);
      return;
    }
    if (key === 'language') {
      history.push('/admin/langconfig');
      return;
    }
    history.push(`/account/${key}`);
  };
  setVisible = (visible: boolean) => {
    this.setState({ visible });
  };
  render(): React.ReactNode {
    const {
      currentUser = {
        avater: '',
        name: '',
        id: 0,
      },
    } = this.props;
    const menuItems = [
      {
        label: <FormattedMessage id="pages.changePassword" />,
        key: 'resetPsw',
        icon: <LockOutlined />,
      },
      {
        label: <FormattedMessage id="pages.languageSetting" />,
        key: 'language',
        icon: <GlobalOutlined />,
      },
      {
        type: 'divider',
        key: 'divider',
      },
      {
        label: <FormattedMessage id="pages.logout" />,
        key: 'logout',
        icon: <LogoutOutlined />,
      },
    ];
    const menuHeaderDropdown = (
      <Menu
        className={styles.menu}
        selectedKeys={[]}
        onClick={this.onMenuClick}
        items={menuItems}
      />
    );
    return currentUser && currentUser.name ? (
      <>
        <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`}>
            <Avatar
              size="small"
              className={styles.avatar}
              src={currentUser?.avater ? UploadUtil.ossServ + currentUser?.avater : imgAvatar}
              alt="avatar"
            />
            <span className={`${styles.name} anticon`}>{currentUser.name}</span>
          </span>
        </HeaderDropdown>
        <Modal
          title={<FormattedMessage id="pages.changePassword" />}
          visible={this.state.visible}
          onOk={() => this.setVisible(false)}
          onCancel={() => this.setVisible(false)}
          footer={null}
          destroyOnClose={true}
        >
          <PswUpdate userId={currentUser.id} />
        </Modal>
      </>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
